<template>
<el-scrollbar style="height:100%;">
    <div class="container p-40" v-loading="loading">
        <el-row style="margin-bottom:20px;">
            <el-col :span="5">
                <el-input disabled placeholder="所属区域" :value="basicForm.areaNumber"></el-input>
            </el-col>
            <el-col :span="5">
                <el-input disabled placeholder="所属楼宇" :value="basicForm.buildingName"></el-input>
            </el-col>
            <el-col :span="5">
                <el-input disabled placeholder="房间号" :value="basicForm.houseNumber"></el-input>
            </el-col>
        </el-row>
        <el-form ref="refForm" :rules="rules" :model="basicForm" label-width="2rem">
            <p class="f-20 m-b-20">水/电/煤气管理费</p>
            <el-row :gutter="40">
                <el-col :span="8">
                    <el-form-item label="水：上月行度" prop="lastMonthWaterMobility">
                        <el-input type="number" v-model="basicForm.lastMonthWaterMobility"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item v-if="basicForm.waterCostCode" label="本月行度" prop="monthWaterMobility">
                        <el-input type="number" v-model="basicForm.monthWaterMobility">
                          <span v-if="waterShow" slot="suffix">云丁回显</span>
                        </el-input>
                    </el-form-item>
                    <el-form-item v-else label="本月行度" prop="monthWaterMobility">
                        <el-input disabled type="number" v-model="basicForm.monthWaterMobility"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="用水量">
                        <el-input disabled :value="basicForm.monthWaterConsumption"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item v-if="basicForm.hotWaterCostCode" label="热水：上月行度" prop="lastMonthHotWaterMobility">
                        <el-input type="number" v-model="basicForm.lastMonthHotWaterMobility"></el-input>
                    </el-form-item>
                    <el-form-item v-else label="热水:上月行度" prop="lastMonthHotWaterMobility" :rules = "[{required: false}]">
                        <el-input disabled type="number" v-model="basicForm.lastMonthHotWaterMobility"></el-input>
                    </el-form-item>                    
                </el-col>
                <el-col :span="8">
                    <el-form-item v-if="basicForm.hotWaterCostCode" label="热水本月行度" prop="monthHotWaterMobility">
                        <el-input type="number" v-model="basicForm.monthHotWaterMobility">
                          <span v-if="hotWaterShow" slot="suffix">云丁回显</span>
                        </el-input>
                    </el-form-item>
                    <el-form-item v-else label="热水本月行度" prop="monthHotWaterMobility" :rules = "[{required: false}]">
                        <el-input disabled type="number" v-model="basicForm.monthHotWaterMobility"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="热水用水量">
                        <el-input disabled :value="basicForm.monthHotWaterConsumption"></el-input>
                    </el-form-item>
                </el-col>                
                <el-col :span="8">
                    <el-form-item label="电：上月行度" prop="lastMonthElectricityMobility">
                        <el-input type="number" v-model="basicForm.lastMonthElectricityMobility"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item v-if="basicForm.electricCostCode" label="本月行度" prop="monthElectricityMobility">
                        <el-input type="number" v-model="basicForm.monthElectricityMobility">
                          <span v-if="electricShow" slot="suffix">云丁回显</span>
                        </el-input>
                    </el-form-item>
                    <el-form-item v-else label="本月行度">
                        <el-input disabled type="number" v-model="basicForm.monthElectricityMobility"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="用电量">
                        <el-input disabled :value="basicForm.monthElectricityConsumption"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="煤：上月行度" prop="lastMonthGasMobility">
                        <el-input type="number" v-model="basicForm.lastMonthGasMobility"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item v-if="basicForm.coalGasCostCode" label="本月表数" prop="monthGasMobility">
                        <el-input type="number" v-model="basicForm.monthGasMobility">
                        </el-input>
                    </el-form-item>
                    <el-form-item v-else label="本月表数">
                        <el-input disabled type="number" v-model="basicForm.monthGasMobility">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="用气量">
                        <el-input disabled :value="basicForm.monthGasConsumption"></el-input>
                    </el-form-item>
                </el-col>
                <!-- huangjj 1013日改动 -->
                <el-col :span="8">
                    <el-form-item label="气费" prop="gasShortage">
                        <el-input type="number" v-model="basicForm.gasShortage">
                            <template slot="suffix">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="综合管理费" prop="comprehensiveManagementRate">
                        <el-input type="number" v-model="basicForm.comprehensiveManagementRate">
                            <template slot="suffix">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="其他" prop="otherPrice">
                        <el-input type="number" v-model="basicForm.otherPrice">
                            <template slot="suffix">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <!-- 1013end -->
                
                <el-col :span="8">
                    <el-form-item label="煤气欠费">
                        <el-input type="number" :disabled="!basicForm.coalGasCostCode" v-model="basicForm.gasArrears">
                            <template slot="suffix">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="换表费">
                        <el-input type="number" :disabled="!basicForm.coalGasCostCode" v-model="basicForm.gasChangeWatchSpense">
                            <template slot="suffix">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item v-show = "basicForm.elevatorFee!=null" prop="elevatorFee" label="电梯费">
                        <el-input type="number" v-model="basicForm.elevatorFee">
                            <template slot="suffix">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item v-show = "basicForm.sanitationFee!=null" label="卫生费" prop="sanitationFee">
                        <el-input type="number" v-model="basicForm.sanitationFee">
                            <template slot="suffix">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item v-show = "basicForm.maintenanceFund!=null" label="本体维修基金" prop="maintenanceFund">
                        <el-input type="number" v-model="basicForm.maintenanceFund">
                            <template slot="suffix">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item v-show = "basicForm.gasInsurance!=null" label="电视费/煤保" prop="gasInsurance">
                        <el-input type="number" v-model="basicForm.gasInsurance">
                            <template slot="suffix">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row justify="center" style="margin-top: 0.2rem">
                <el-col :span="4" :offset="10">
                    <el-button type="primary" @click="submit">确定</el-button>
                    <el-button @click="close">取消</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-row style="margin-bottom:20px;">
            <el-col :span="15">
                <p class="f-18" v-if="bHasWaterDeviceChange">上月该房间有换<span class="color-red">水表</span>,具体用量以实际计算为准，
                    <el-link class="primary" @click="$router.push('/room/edit?id='+basicForm.fkRoomId)">点击查看换表记录</el-link>
                </p>
                <p class="f-18" v-if="bHasHotWaterDeviceChange">上月该房间有换<span class="color-red">热水表</span>,具体用量以实际计算为准，
                    <el-link class="primary" @click="$router.push('/room/edit?id='+basicForm.fkRoomId)">点击查看换表记录</el-link>
                </p>
                <p class="f-18" v-if="bHasElectricDeviceChange">上月该房间有换<span class="color-red">电表</span>,具体用量以实际计算为准，
                    <el-link class="primary" @click="$router.push('/room/edit?id='+basicForm.fkRoomId)">点击查看换表记录</el-link>
                </p>
                <p class="f-18" v-if="bHasGasDeviceChange">上月该房间有换<span class="color-red">气表</span>,具体用量以实际计算为准，
                    <el-link class="primary" @click="$router.push('/room/edit?id='+basicForm.fkRoomId)">点击查看换表记录</el-link>
                </p>
            </el-col>
        </el-row>   
    </div>
</el-scrollbar>
</template>
<script>
    import { getDeviceChangesByRoomId_CurrentMonth } from "@/api/house/room/room.js";
    import {
        meterReadingByExpenseManagId,
        updateMeterReadingInformation
    } from "@/api/operations/cost/cost.js";
    export default {
        components: {},
        watch: {
            'basicForm.monthWaterMobility': {
                immediate: true,
                handler() {
                    let form = this.basicForm;
                    if (form.monthWaterMobility) {
                        if (!form.lastMonthWaterMobility) {
                            form.lastMonthWaterMobility = 0;
                        }
                        form.monthWaterConsumption = (form.monthWaterMobility * 10000 - form.lastMonthWaterMobility * 10000) / 10000;
                    }else{
                        form.monthWaterConsumption = null
                    }
                }
            },
            'basicForm.monthHotWaterMobility': {
                immediate: true,
                handler() {
                    let form = this.basicForm;
                    if (form.monthHotWaterMobility) {
                        if (!form.lastMonthHotWaterMobility) {
                            form.lastMonthHotWaterMobility = 0;
                        }
                        form.monthHotWaterConsumption = (form.monthHotWaterMobility * 10000 - form.lastMonthHotWaterMobility * 10000) / 10000;
                    }else{
                        form.monthHotWaterConsumption = null
                    }
                }
            },            
            'basicForm.monthElectricityMobility': {
                immediate: true,
                handler() {
                    let form = this.basicForm;
                    if (form.monthElectricityMobility) {
                        if (!form.lastMonthElectricityMobility) {
                            form.lastMonthElectricityMobility = 0;
                        }
                        form.monthElectricityConsumption = (form.monthElectricityMobility * 10000 - form.lastMonthElectricityMobility * 10000) / 10000;
                    }else{
                        form.monthElectricityConsumption = null
                    }
                }
            },
            'basicForm.monthGasMobility': {
                immediate: true,
                handler() {
                    let form = this.basicForm;
                    if (form.monthGasMobility) {
                        if (!form.lastMonthGasMobility) {
                            form.lastMonthGasMobility = 0;
                        }
                        form.monthGasConsumption = (form.monthGasMobility * 10000 - form.lastMonthGasMobility * 10000) / 10000;
                    }else{
                        form.monthGasConsumption = null
                    }
                },
            },
            
            // 上月数据改动
            'basicForm.lastMonthWaterMobility': {
                immediate: true,
                handler() {
                    let form = this.basicForm;
                    if (form.monthWaterMobility) {
                        if (!form.lastMonthWaterMobility) {
                            form.lastMonthWaterMobility = 0;
                        }
                        form.monthWaterConsumption = (form.monthWaterMobility * 10000 - form.lastMonthWaterMobility * 10000) / 10000;
                    }else{
                        form.monthWaterConsumption = null
                    }
                }
            },
            'basicForm.lastMonthHotWaterMobility': {
                immediate: true,
                handler() {
                    let form = this.basicForm;
                    if (form.monthHotWaterMobility) {
                        if (!form.lastMonthHotWaterMobility) {
                            form.lastMonthHotWaterMobility = 0;
                        }
                        form.monthHotWaterConsumption = (form.monthHotWaterMobility * 10000 - form.lastMonthHotWaterMobility * 10000) / 10000;
                    }else{
                        form.monthHotWaterConsumption = null
                    }
                }
            },            
            'basicForm.lastMonthElectricityMobility': {
                immediate: true,
                handler() {
                    let form = this.basicForm;
                    if (form.monthElectricityMobility) {
                        if (!form.lastMonthElectricityMobility) {
                            form.lastMonthElectricityMobility = 0;
                        }
                        form.monthElectricityConsumption = (form.monthElectricityMobility * 10000 - form.lastMonthElectricityMobility * 10000) / 10000;
                    }else{
                        form.monthElectricityConsumption = null
                    }
                }
            },
            'basicForm.lastMonthGasMobility': {
                immediate: true,
                handler() {
                    let form = this.basicForm;
                    if (form.monthGasMobility) {
                        if (!form.lastMonthGasMobility) {
                            form.lastMonthGasMobility = 0;
                        }
                        form.monthGasConsumption = (form.monthGasMobility * 10000 - form.lastMonthGasMobility * 10000) / 10000;
                    }else{
                        form.monthGasConsumption = null
                    }
                },
            },
            // 'basicForm.hotWaterCostCode': {
            //     immediate:true,
            //     handler() {
            //         let form = this.basicForm;
            //         console.log("===="+form.hotWaterCostCode+"---hotShow="+hotWaterShow);
            //         if (form.hotWaterCostCode != null) {
            //             this.rules.monthHotWaterMobility = [{
            //                 required: true,
            //                 message: "请输入本月热水行度",
            //                 trigger: "blur"
            //             },
            //             {validator: this.$rules.PriceNumber,trigger:"blur" }
            //             ];
            //         }
            //     }
            // },

        },
        data() {
            return {
                // 电费云丁回显
                electricShow:false,
                //  水费云丁回显
                waterShow:false,
                hotWaterShow:false,
                loading: false,
                basicForm: {},
                rules: {
                    elevatorFee:[
                        { validator: this.$rules.PriceNumberCanBeNull },
                    ],
                    sanitationFee:[
                        { validator: this.$rules.PriceNumberCanBeNull },
                    ],
                    maintenanceFund:[
                        { validator: this.$rules.PriceNumberCanBeNull },
                    ],
                    gasInsurance:[
                        { validator: this.$rules.PriceNumberCanBeNull },
                    ],
                    monthWaterMobility: [{
                        required: true,
                        message: "请输入本月水行度",
                        trigger: "blur"
                    },
                    {validator: this.$rules.PriceNumber,trigger:"blur" }
                    ],
                    monthElectricityMobility: [{
                        required: true,
                        message: "请输入本月电行度",
                        trigger: "blur"
                    },
                    {validator: this.$rules.PriceNumber,trigger:"blur" }],
                    monthGasMobility: [{
                        required: true,
                        message: "请输入本月煤气表数",
                        trigger: "blur"
                    },
                    {validator: this.$rules.PriceNumber,trigger:"blur" }],
                    
                    // 1013
                    basicElectricityPrice: [{
                        required: true,
                        message: "请输入基本电价",
                        trigger: "blur"
                    },
                    {validator: this.$rules.PriceNumberAndNegative,trigger:"blur" }],
                    otherPrice: [{
                        required: true,
                        message: "请输入其他",
                        trigger: "blur"
                    },
                    {validator: this.$rules.PriceNumberAndNegative,trigger:"blur" }],
                    gasShortage: [{
                        required: true,
                        message: "请输入气费",
                        trigger: "blur"
                    }],
                    comprehensiveManagementRate: [{
                        required: true,
                        message: "请输入综合管理费",
                        trigger: "blur"
                    }],
                    monthHotWaterMobility : [{
                            required: true,
                            message: "请输入本月热水行度",
                            trigger: "blur"
                        },
                        {validator: this.$rules.PriceNumber,trigger:"blur" }
                    ],                   
                    // 1013
                    
                    lastMonthWaterMobility:[{validator: this.$rules.PriceNumberOrNull,trigger:"blur" }],
                    lastMonthElectricityMobility:[{validator: this.$rules.PriceNumberOrNull,trigger:"blur" }],
                    lastMonthGasMobility:[{validator: this.$rules.PriceNumberOrNull,trigger:"blur" }],
                    lastMonthHotWaterMobility:[{validator: this.$rules.PriceNumberOrNull,trigger:"blur" }],
                },
                bHasWaterDeviceChange:false,
                bHasHotWaterDeviceChange:false,
                bHasElectricDeviceChange:false,
                bHasGasDeviceChange:false
            };
        },
        methods: {
            loadData(id) {
                meterReadingByExpenseManagId(id).then(res => {
                    this.basicForm = res.data;
                    if(this.basicForm.monthElectricityMobility){
                      this.electricShow = true;
                    }
                    if(this.basicForm.monthWaterMobility){
                      this.waterShow = true;
                    }
                    if(this.basicForm.monthHotWaterMobility){
                      this.hotWaterShow = true;
                    }

                    console.log('roomid='+this.basicForm.fkRoomId);

                    getDeviceChangesByRoomId_CurrentMonth(this.basicForm.fkRoomId,"true").then( res => { 
                        if (res.code == 10000) {
                            let deviceChanges = res.data;
                            let iLen =deviceChanges.length;
                            if (iLen > 0) {
                                for (let i = 0;i < iLen;i++) {
                                    //如果之前没有换水表记录，就到当前记录看是否有 换水表记录；否则略过这条记录的水表检测
                                    if (!this.bHasWaterDeviceChange)
                                        this.bHasWaterDeviceChange = deviceChanges[i].newWaterReading != null ? true:false;
                                    
                                    if (!this.bHasHotWaterDeviceChange)
                                        this.bHasHotWaterDeviceChange = deviceChanges[i].newHotWaterReading != null ? true:false;

                                    if (!this.bHasElectricDeviceChange)
                                        this.bHasElectricDeviceChange = deviceChanges[i].newElectricReading != null ? true:false;

                                    if (!this.bHasGasDeviceChange)
                                        this.bHasGasDeviceChange = deviceChanges[i].newGasReading != null ? true:false;
                                }
                            }
                            console.log('res.data='+res.data);
                            console.log('has water deviceChange='+this.bHasWaterDeviceChange);
                            console.log('has hot water deviceChange'+this.bHasHotWaterDeviceChange);
                            console.log('has electric deviceChange'+this.bHasElectricDeviceChange);
                            console.log('has gas deviceChange'+this.bHasGasDeviceChange);
                        }
                    });
                });
            },
            submit() {
                this.basicForm.fkExpenseManagId = this.basicForm.pkExpenseManagId;
                if (!this.basicForm.gasChangeWatchSpense) {
                    this.basicForm.gasChangeWatchSpense = 0;
                }
                if (!this.basicForm.gasArrears) {
                    this.basicForm.gasArrears = 0;
                }
                this.$refs["refForm"].validate((valid) => {
                    if (valid) {
                        updateMeterReadingInformation(this.basicForm).then(res => {
                            if (res.code === 10000) {
                                this.$message.success(res.msg);
                                this.close();
                            }
                        });
                    }
                })
            },
            close() {
                window.history.go(-1);

                //let rex = this.$route.matched[this.$route.matched.length - 1].regex;
                //this.$store.commit("delTabs", rex);
            }
        },
        mounted() {
            if (this.$route.params.id) {
                this.loadData(this.$route.params.id);
            }
        },
    }
</script>
<style scoped>
</style>
